<!DOCTYPE html>
<html class="x-admin-sm">
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>编辑</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="layui-fluid html-editor-align-center">
    <div class="layui-row">
        <form class="layui-form">
            <input type="hidden" id="mid" th:value="${mid}">
            <input type="hidden" name="id" th:value="${product?.id}">
            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    商品名称
                </label>
                <div class="layui-input-inline" >
                    <input  type="text" id="name" name="name" required="" th:value="${product?.name}" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    商品状态
                </label>
                <div class="layui-input-block">
                    <div th:if="${product?.isSell} eq null">
                        <input type="radio"  name="isSell" value="0" title="销售" checked>
                        <input type="radio" name="isSell" value="1" title="禁售" >
                    </div>
                    <div th:if="${product?.isSell} eq 0">
                        <input type="radio"  name="isSell" value="0" title="销售" checked>
                        <input type="radio" name="isSell" value="1" title="禁售" >
                    </div>
                    <div th:if="${product?.isSell} eq 1">
                        <input type="radio" name="isSell" value="0" title="销售" >
                        <input type="radio" name="isSell" value="1" title="禁售" checked>
                    </div>


                </div>
            </div>

            <div class="layui-form-item">
                <label for="price" class="layui-form-label">
                    商品价格
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="price" name="price" required="" th:value="${product?.price}" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="stock" class="layui-form-label">
                    商品库存
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="stock" name="stock" required="" th:value="${product?.stock}" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="content" class="layui-form-label">
                    商品介绍
                </label>
                <div class="layui-input-inline">
<!--                    <textarea id="content" name="content"  th:placeholder="${product?.content}" class="layui-textarea"></textarea>-->
                    <input type="text" id="content" name="content" required="" th:value="${product?.content}" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="image" class="layui-form-label">
                    商品图片
                </label>
                <div class="layui-input-inline">
                    <input type="hidden" name="image" th:value="${product?.image}" id="images">
                    <button type="button" class="layui-btn" id="image">
                        <i class="layui-icon">&#xe67c;</i>上传图片
                    </button>
                </div>
            </div>
            <div class="layui-form-item">
                   <div  th:if="${product?.image}">
                       <img id="demo1" style="align-content: center;width: 200px;height: 150px;margin: 0 150px"  th:src="${product?.image}">
                   </div>
                    <img th:if="${product?.image} eq null" id="demo2" style="align-content: center;width: 200px;height: 150px;margin: 0 150px" src="/images/tp.jpg">
            </div>
            <div class="layui-form-item">
                <label  class="layui-form-label">
                </label>
                <button th:if="${product?.id}" class="layui-btn" style="width: 60%;align-items: center" lay-filter="update" lay-submit="">
                    <span >修改</span>
                </button>
                <button th:if="${product?.id} eq null" class="layui-btn" style="width: 60%;align-items: center" lay-filter="add" lay-submit="">
                    <span >添加</span>
                </button>
            </div>
        </form>
    </div>
</div>
<script>layui.use(['form', 'layer','upload'],
    function() {
        $ = layui.jquery;
        var form = layui.form,
            layer = layui.layer,
            upload = layui.upload;

        let m = $("#mid").val();
        console.log("product mid"+m)
        var mid = m;

        //执行实例
        var uploadInst = upload.render({
            elem: '#image' //绑定元素
            ,url: '/fileUpload' //上传接口
            ,size: 10240
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                    $('#demo2').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //上传完毕回调
                console.log(res.data.src)
                $("#images").attr('value',res.data.src)
            }
            ,error: function(){
                //请求异常回调
                console.log("请求异常")
            }
        });

        //监听修改提交
        form.on('submit(update)',
            function(data) {
                let product = data.field;
                $.ajax({
                    url: '/product/updateProduct',
                    type: 'post',
                    dataType: 'json',
                    async: false,
                    data: {
                        id: product.id,
                        name: product.name,
                        image: product.image,
                        stock: product.stock,
                        content: product.content,
                        isSell: product.isSell,
                        price: product.price
                    },
                    success: function (res) {
                        //关闭当前frame
                        layer.close();
                        // 可以对父窗口进行刷新
                        xadmin.father_reload();
                    },
                    error: function (res){
                        console.log(res.msg)
                    }
                })
                return
            });

        // 添加提交
        form.on('submit(add)',
            function(data) {
                let product = data.field;
                console.log("这是添加")
                $.ajax({
                    url: '/product/insertProduct',
                    type: 'post',
                    dataType: 'json',
                    async: false,
                    data: {
                        name: product.name,
                        image: product.image,
                        stock: product.stock,
                        content: product.content,
                        isSell: product.isSell,
                        price: product.price,
                        mid: mid
                    },
                    success: function (res) {
                        //关闭当前frame
                        xadmin.close();
                        // 可以对父窗口进行刷新
                        xadmin.father_reload();
                    },
                    error: function (res){
                        console.log(res.msg)
                    }
                })
            });
    });
</script>
<script>

</script>
</body>

</html>
